<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/bd.css">
</head>
<body>
    <div class="bd">
        <div id="name">
            <label class="name" for="bd-xm">姓名</label>
            <input type="text" placeholder="请输入姓名" id="bd-xm">
        </div>
        <div id="phone">
            <label for="bd-lx" class="phone">联系电话</label>
            <input type="text" placeholder="请输入联系电话" id="bd-lx">
        </div>
        <div id="xl">
            <label for="bd-xl">学历</label>
            <input type="text" placeholder="请输入您的学历" id="bd-xl">
        </div>
        <div id="nl">
            <label for="bd-nl">年龄</label>
            <input type="text" placeholder="请输入您的年龄" id="bd-nl">
        </div>
        <div id="xz">
            <label for="bd-xz">期望薪资</label>
            <input type="text" placeholder="请输入您的期望薪资" id="bd-xz">
        </div>
        <div>
            <button class="save">保存</button>
            <button class="reset">重置</button>
        </div>

    </div>

    <div class="set">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>学历</td>
                    <td>年龄</td>
                    <td>期望薪资</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="gray">
        <div class="zhe">
            <h2>请修改信息</h2>
            <div >
                <label for="bd-xm">姓名</label>
                <input type="text" placeholder="请输入姓名" id="bdxm">
            </div>
            <div >
                <label for="bd-lx">联系电话</label>
                <input type="text" placeholder="请输入联系电话" id="bdlx">
            </div>
            <div >
                <label for="bd-xl">学历</label>
                <input type="text" placeholder="请输入您的学历" id="bdxl">
            </div>
            <div >
                <label for="bd-nl">年龄</label>
                <input type="text" placeholder="请输入您的年龄" id="bdnl">
            </div>
            <div >
                <label for="bd-xz">期望薪资</label>
                <input type="text" placeholder="请输入您的期望薪资" id="bdxz">
            </div>
            <div>
                <button class="off">关闭</button>
                <button class="copy">保存修改</button>
            </div>

        </div>

    </div>
    <script src="../tools/jquery.min.js"></script>
    <script>
        $('#bd-xm').change(function(){
            if(/^[\u4e00-\u9fa5]{0,}$/.test( $('#bd-xm').val())){
                $('#name').css('borderColor','red');
                $('.name').css('backgroundColor','red');
            }else{
                $('#name').css('borderColor','green');
                $('.name').css('backgroundColor','green');
                window.alert('请重新输入您的姓名,必须是中文不能数字开头');
                $('#bd-xm').val('');
                return;
            }
        })
        $('#bd-lx').change(function(){
            if(/^\d{8,11}$/.test( $('#bd-lx').val())){
                $('#phone').css('borderColor','red');
                $('.phone').css('backgroundColor','red');

            }else{
                $('#phone').css('borderColor','green');
                $('.phone').css('backgroundColor','green');
                window.alert('请重新输入联系电话,必须是数值8-11位');
                $('#bd-lx').val('');
                return;

            }
        })


        $('.save').click(function () {
            let xm = $('#bd-xm').val();
            let lx = $('#bd-lx').val();
            let xl = $('#bd-xl').val();
            let nl = $('#bd-nl').val();
            let xz = $('#bd-xz').val();
            if(xm==='' || lx === '' || xl === '' || nl === '' || xz === ''){
                $('.bd div').css('borderColor','green');
                $('.bd div label').css('backgroundColor','green');
                window.alert('请仔细检查,必须全部输入');
                return;
            }else{
                $('.bd div').css('borderColor','red');
                $('.bd div label').css('backgroundColor','red');

            }

            //利用数据定义对象存储

            let obj =
            {
                name: xm, phone: lx, education: xl, age: nl, money: xz,
            };


            //获取localStorage数据
            //如果是空  
            //转化为json字符串  设定本地数据库
            let res = window.localStorage.res;
            if (res === undefined) {

                window.localStorage.res = JSON.stringify([obj]);
            } else {
                res = JSON.parse(res);
                res.unshift(obj);
                window.localStorage.res = JSON.stringify(res);
            }
            // console.log(res.length);
            setPage();

            $('#bd-xm').val('');
            $('#bd-lx').val('');
            $('#bd-xl').val('');
            $('#bd-nl').val('');
            $('#bd-xz').val('');
            $('.bd div').css('borderColor','');
            $('.bd div label').css('backgroundColor','');


        })
        $('.reset').click(function () {
            $('#bd-xm').val('');
            $('#bd-lx').val('');
            $('#bd-xl').val('');
            $('#bd-nl').val('');
            $('#bd-xz').val('');
            $('.bd div').css('borderColor','');
            $('.bd div label').css('backgroundColor','');

        })

        //动态生成表格
        function setPage() {
            let res = window.localStorage.res;
            res = JSON.parse(res);

            if (res.length === 0) {

                $('tbody').html('<tr><td colspan="6">您没有输入数据哦，请尝试输入数据试试呢！</td></tr>');
            } else {
                let str = '';

                res.forEach(eval => {
                    str += `
                <tr>
                    <td >${eval.name}</td>
                    <td>${eval.phone}</td>
                    <td>${eval.education}</td>
                    <td>${eval.age}</td>
                    <td>${eval.money}</td>
                    <td>
                        <button name="case" >修改</button>
                        <button name="del" class="${eval.name}">删除</button>
                    </td>
                </tr>
              `;
                })
                $('tbody').html(str);

            }
        }

        //删除按钮
        const oTbody = document.querySelector('tbody');
        const oZhe = document.querySelector('.gray');

        window.addEventListener('click',function(event){

            let res = window.localStorage.res;
            res = JSON.parse(res);


            if(event.target.getAttribute('name') === 'del'){
                window.confirm('您确定要删除吗');
                for(let i = 0 ; i <= res.length-1; i++){
                    if(res[i].name === event.target.getAttribute('class') ){
                        res.splice(i,1);
                    }
                }

                window.localStorage.res = JSON.stringify(res);
                setPage();
                

            }else if(event.target.getAttribute('name') === 'case'){
                     $('.gray').css('display','flex');
                    
            }else if(event.target.getAttribute('class') === 'copy'){
                window.confirm('您确定要修改吗');
                     let xm = $('#bdxm').val();
                     let lx = $('#bdlx').val();
                     let xl = $('#bdxl').val();
                     let nl = $('#bdnl').val();
                     let xz = $('#bdxz').val();

                     


                     for(let i =0 ; i <= res.length-1 ; i++){
                        
                        if(res[i].name === xm ){
                            res[i].name = xm;
                            res[i].phone = lx;
                            res[i].education = xl;
                            res[i].age = nl;
                            res[i].money = xz;
                       
                    }

                     }
                     window.localStorage.res = JSON.stringify(res);
                     setPage();
                     $('.gray').css('display','none');
                     $('#bdxm').val('');
                     $('#bdlx').val('');
                     $('#bdxl').val('');
                     $('#bdnl').val('');
                     $('#bdxz').val('');
                
            }

            })

        $('.off').click(function(){
            $('.gray').css('display','none');

        })


    </script>

</body>

  



</html>